<template>
    <div class="coupon-sec">
        <!-- 头部区域 start -->
        <my-header :ref="refName" title="优惠券" :clickLeft="onClickLeft" :clickRight="onClickRight">
            <!-- 左侧按钮插槽 -->
            <template #left>
                <i class="gray-icon"/>
            </template>
            <!-- 右侧按钮插槽 -->
            <template #right>
                <i class="more-icon"/>
            </template>
        </my-header>
        <!-- 头部区域 start -->

        <!-- 优惠券内容区域 start -->
        <coupon-tab-item :tabTitles="tabTitles" :couponListData="couponListData"/>
        <!-- 优惠券内容区域 end -->
    </div>
</template>

<script>
    // 引入优惠券模块接口
    import {getCouponList} from "../../request/couponApi";
    // 引入头部组件
    import myHeader from "../../components/myHeader/myHeader";
    // 引入优惠券切换tab组件
    import couponTabItem from "./couponTabItem";

    export default {
        data() {
            return {
                refName: 'myHeader',
                tabTitles: [
                    {id: 'unUse', title: '未使用'},
                    {id: 'used', title: '使用记录'},
                    {id: 'expire', title: '已过期'}
                ],
                couponListData: [],        // 优惠券列表数据
            }
        },
        methods: {
            // 需要传递给头部组件的左侧按钮事件
            onClickLeft() {
                // 返回上一页
                this.$router.go(-1);
            },
            // 点击右侧按钮触发头部组件事件
            onClickRight() {
                console.log('点击右侧...此处可写你要传递的方法（例如路由跳转）');
            }
        },
        mounted() {
            getCouponList().then(res => {
                console.log('res:', res);
                this.couponListData = res.couponListData;
                for (let i in this.tabTitles) {
                    this.tabTitles[i].title += `(${res.couponListData[i].length})`;
                }
                console.log(this.tabTitles);
            });
        },
        components: {myHeader, couponTabItem}
    }
</script>

<style lang="less" scoped>
    // 头部区域
    .header {
        background-color: #fff;
        // 返回图标
        .gray-icon {
            display: block;
            background: url("../../../static/images/myHeader/back-gray.png") no-repeat 0 0;
            background-size: contain;
            width: 57px;
            height: 21px;
        }
        // 更多图标
        .more-icon {
            display: block;
            background: url("../../../static/images/myHeader/more.png") no-repeat 0 0;
            background-size: contain;
            width: 57px;
            height: 12px;
        }
        /* 导航栏区域 */
        /deep/ .van-nav-bar {
            /* 标题 */
            .van-nav-bar__title {
                color: #232323;
            }
        }
    }

    /* 优惠券内容区域 */
    /*/deep/.coupon-tab-sec {*/
    /*    !* tab切换区域 *!*/
    /*    .van-tabs__wrap {*/
    /*        width: 100%;*/
    /*        height: 74px;*/
    /*        !* tab切换底部条 *!*/
    /*        .van-tabs__line {*/
    /*            width: 98px;*/
    /*            height: 4px;*/
    /*        }*/
    /*    }*/
    /*    !* 切换内容区域 *!*/
    /*    .coupon-tab-item {*/
    /*        width: 100%;*/
    /*        height: 1132px;*/
    /*        background-color: #F3F3F3;*/
    /*        overflow: auto;*/
    /*        !* 优惠券列表区域 *!*/
    /*        .coupon-list {*/
    /*            padding: 20px 44px 20px 48px;*/
    /*            !* 优惠券列表项 *!*/
    /*            .coupon-list-item {*/
    /*                width: 100%;*/
    /*                height: 206px;*/
    /*                margin-bottom: 20px;*/
    /*                display: flex;*/
    /*                !* 左侧优惠券价格区域 *!*/
    /*                .coupon-item-left {*/
    /*                    width: 255px;*/
    /*                    height: 100%;*/
    /*                    text-align: center;*/
    /*                    background: url("/static/images/coupon/coupon-price-bg.png") no-repeat 0 0;*/
    /*                    background-size: contain;*/
    /*                    !* 优惠券价格 *!*/
    /*                    .coupon-item-price {*/
    /*                        margin-top: 10px;*/
    /*                        font-size: 90px;*/
    /*                        font-weight: bold;*/
    /*                        color: #FFFFFF;*/
    /*                        span {*/
    /*                            font-size: 30px;*/
    /*                            margin-right: 10px;*/
    /*                        }*/
    /*                    }*/
    /*                    !* 优惠券使用条件描述 *!*/
    /*                    .coupon-item-desc {*/
    /*                        font-size: 30px;*/
    /*                        font-weight: 400;*/
    /*                        color: #FFFFFF;*/
    /*                    }*/
    /*                }*/
    /*                !* 右侧优惠券描述信息区域 *!*/
    /*                .coupon-item-right {*/
    /*                    width: 403px;*/
    /*                    height: 100%;*/
    /*                    background: url("/static/images/coupon/coupon-desc-bg.png") no-repeat 0 0;*/
    /*                    background-size: contain;*/
    /*                    text-align: center;*/
    /*                    !* 优惠券名称 *!*/
    /*                    .coupon-item-title {*/
    /*                        font-size: 28px;*/
    /*                        font-weight: 400;*/
    /*                        color: #040404;*/
    /*                        opacity: 0.9;*/
    /*                        margin-top: 17px;*/
    /*                    }*/
    /*                    !* 优惠券截止日期 *!*/
    /*                    .coupon-item-date {*/
    /*                        font-size: 24px;*/
    /*                        font-weight: bold;*/
    /*                        color: #040404;*/
    /*                        opacity: 0.5;*/
    /*                        margin-top: 18px;*/
    /*                    }*/
    /*                    !* 立即使用按钮 *!*/
    /*                    .coupon-item-btn {*/
    /*                        width: 137px;*/
    /*                        height: 42px;*/
    /*                        border: 2px solid #E32121;*/
    /*                        border-radius: 20px;*/
    /*                        font-size: 24px;*/
    /*                        font-weight: bold;*/
    /*                        color: #E32121;*/
    /*                        background-color: #fff;*/
    /*                        margin-top: 20px;*/
    /*                    }*/
    /*                }*/
    /*            }*/
    /*        }*/
    /*    }*/

    /*}*/
</style>
